<template>
  <div>

    <ul>
      <h3> {{ pos }}</h3>
      <li v-for="(v, x) in classList" :key="x" class="ul-li">
        <ol>
          <li :style="style(x, y)" class="ol-li" v-for="(v, y) in v" :key="y">{{ v }}</li>
        </ol>
      </li>

      <h3>
        <van-button @click="start" block type="primary" style="margin-top: 10px;">抽取名单</van-button>
      </h3>
    </ul>
  </div>
</template>


<script setup>
import { ref } from 'vue'
const maxX = ref(3);
const maxY = ref(4);
const pos = ref({ x: -1, y: -1 })
const color = ref('#000')
const classList = [
  ["高源", "邱旭壯", "周奇昌", "晏光民", "赵晨宇"],
  ["方佳利", "张悦", "朱叶可", "李铭", "李亚毫"],
  ["赵辰菲", "刘盈莹", "郎昆", "张天乐", "单嘉冰"],
  [null, "郭豪", "雷金龙", "腾锦", "王洋"],
]
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)



const getColor = () => '#' + Math.random().toString(16).slice(2, 8)
const getName = () => {
  color.value = getColor();
  const { x, y } = getPos()
  pos.value.x = x
  pos.value.y = y
}
const getPos = () => {
  let x, y
  while (true) {
    x = random(0, maxX.value)
    y = random(0, maxY.value);
    if (classList[x][y]) {
      break;
    }
  }
  return { x, y }
}
const start = () => {
  getName();
  const timer = setInterval(() => {
    getName();
  }, 100);

  setTimeout(() => {
    clearInterval(timer);

  }, 3000)
}
const style = (x, y) => {
  if (x === pos.value.x && y === pos.value.y) {
    return {
      backgroundColor: color.value
    }
  }

  return {
    backgroundColor: '#fff'
  }
}
</script>

<style lang="scss">
li {
  list-style: none;
}

ul {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

ol {
  display: flex;
}

.ol-li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
</style>